<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/info.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<link href="css/comment.css" rel="stylesheet">
<script src="js/jquery.min.1.0.js" type="text/javascript"></script>
<title>博客详情</title>
</head>
<body>
	<header>
	<div class="logo">
		<c:if test="${empty sessionScope.reqUser }">
			<h3>${sessionScope.username }的个人博客</h3>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<h3>${sessionScope.reqUser }的个人博客</h3>
		</c:if>
	</div>
	<nav id="nav">
	<ul>
		<li><a id="index" href="index.jsp">网站首页</a></li>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a
				href="BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a href="user/about.jsp">个人资料</a></li>
		</c:if>
		<li><a href="user/share.jsp">生活记录</a></li>
		<li><a href="user/message.jsp">留言板</a></li>
	</ul>
	</nav> <script>
		window.onload = function() {
			var obj = null;
			var As = document.getElementById('nav').getElementsByTagName('a');
			obj = As[0];
			for (i = 1; i < As.length; i++) {
				if (window.location.href.indexOf(As[i].href) >= 0)
					obj = As[i];
			}
			obj.id = 'selected'
		}
	</script> </header>
	<div class="mnav">
		<ul>
			<li><a id="index" href="index.jsp">网站首页</a></li>
			<c:if test="${empty sessionScope.reqUser }">
				<li><a
					href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
			</c:if>
			<c:if test="${!empty sessionScope.reqUser }">
				<li><a
					href="BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
			</c:if>
			<c:if test="${empty sessionScope.reqUser }">
				<li><a href="user/about.jsp">个人资料</a></li>
			</c:if>
			<li><a href="user/share.jsp">生活记录</a></li>
			<li><a href="user/message.jsp">留言板</a></li>
		</ul>
	</div>
	<article>
	<div class="l_box">
		<div class="about_me">
			<c:if test="${!empty sessionScope.username }">
				<h2>关于我</h2>

				<ul>
					<i><img src="/images/${sessionScope.userImg }"></i>
					<p>
						<b id="username">姓名：${sessionScope.username }</b><span
							style="cursor: pointer;" onclick="logout()">[退出登录]</span><br>
						<b>性别：*</b><br> <b>联系电话：1*****</b>
					</p>
				</ul>
			</c:if>
			<c:if test="${empty sessionScope.username }">
				<h2>关于我</h2>
				<ul>
					<i><img src="images/timg.jpg"
						style="height: 80px; width: 120px"></i>
					<p>
						<b><a href="login.jsp">请登录</a></b>

					</p>
				</ul>
			</c:if>

		</div>

		<div class="search">
			<form action="BlogServlet?task=queryBlog" method="post"
				name="searchform" id="searchform">
				<input name="title" id="keyboard" class="input_text"
					value="请输入要搜索的文章标题" style="color: rgb(153, 153, 153);"
					onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
					onblur="if(value==''){this.style.color='#999';value='请输入要搜索的文章标题'}"
					type="text"> <input name="show" value="title" type="hidden">
				<input name="tempid" value="1" type="hidden"> <input
					name="tbname" value="news" type="hidden"> <input
					name="Submit" class="input_submit" value="搜索" type="submit">
			</form>
		</div>
		<div class="fenlei">
			
		</div>
		<div class="tuijian">
			<h2>最新博客</h2>
			<ul>
				<c:forEach items="${newblogList}" var="newblog">

					<li><a class="article"
						href="BlogServlet?task=queryBlogById&id=${newblog.id }"
						title="${newblog.title }" id="${newblog.id }"> <c:if
								test="${fn:length(newblog.title)>10 }">
                         ${fn:substring(newblog.title, 0, 10)}...
                  </c:if> <c:if test="${fn:length(newblog.title)<=10 }">
                         ${newblog.title }
                   </c:if>
					</a><span style="font-size: 12px; font-weight: normal; float: right">阅读数
							<span id="count">${newblog.count }</span>
					</span></li>
				</c:forEach>

			</ul>
		</div>

		<div class="tuijian">
			<h2>热点博客</h2>
			<ul>
				<c:forEach items="${hotblogList}" var="hotblog">
					<li><a class="article"
						href="BlogServlet?task=queryBlogById&id=${hotblog.id }"
						title="${hotblog.title }" id="${hotblog.id }"> <c:if
								test="${fn:length(hotblog.title)>10 }">
                         ${fn:substring(hotblog.title, 0, 10)}...
                  </c:if> <c:if test="${fn:length(hotblog.title)<=10 }">
                         ${hotblog.title }
                   </c:if>
					</a><span style="font-size: 12px; font-weight: normal; float: right">阅读数
							<span id="count">${hotblog.count }</span>
					</span></li>
				</c:forEach>

			</ul>
		</div>
	</div>
	<div class="infosbox">
		<div class="newsview">
			<h3 class="news_title">${blog.title }</h3>
			<div class="bloginfo">
				<ul>
					<li style="display: none"><input id="articleId" type="text"
						value="${blog.id }"></li>
					<li class="author">作者： <c:if
							test="${blog.author==sessionScope.username }">
							<a id="author"
								href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">${blog.author }</a>
						</c:if> <c:if test="${blog.author!=sessionScope.username }">
							<a id="author"
								href="BlogServlet?task=queryOtherBlog&author=${blog.author }">${blog.author }</a>
						</c:if>
					</li>
					<li class="timer">时间：${blog.date }</li>
					<li class="view">${blog.count }人已阅读</li>
				</ul>
			</div>
			<div class="tags">
				<a href="/" target="_blank">${blog.type }</a>
			</div>

			<div class="news_con">${blog.content }</div>
		</div>

		<div class="news_pl">

			<div style="margin: 0px auto;" class="keleyitable">
				<h2 style="margin-bottom: 20px">评论列表</h2>
				<div id="commentBox"></div>
				<span id="loadmore"
					style="display: none; cursor: pointer; margin-left: 260px">加载更多</span>
				<div id="commentBox2"></div>

			</div>
			<c:if test="${empty sessionScope.username }">
				<h4 style="margin-left: 30px; margin-top: 30px">
					<a href="login.jsp"
						style="cursor: pointer; color: maroon; text-decoration: underline;">登录</a>后发表评论
				</h4>
			</c:if>
			<c:if test="${!empty sessionScope.username }">
				<c:if test="${sessionScope.username!=blog.author }">
					<h4 style="margin-left: 30px; margin-top: 30px">你也来说两句吧</h4>
					<div
						style="width: 600px; margin: 10px auto; border: 1px solid #999; padding: 15px 15px">
						<h5 style="margin-bottom: 15px">评论内容</h5>
						<%-- <form action="CommentServlet?task=addcomment&articleId=${blog.id }" method="post"> --%>
						<input name="articleId" type="text" value="${blog.id }"
							style="display: none"> <input class="commentUser"
							name="commentUser" value="${sessionScope.username }"
							style="display: none">
						<table>

							<tr style="height: 80px">
								<td rowspan="2" class="klytd"><img name="img"
									id="commentimg"
									style="width: 65px; height: 60px; border-radius: 50%; margin: 0 20px 15px 15px"
									src="/images/${sessionScope.userImg }"></td>
								<td class="hvttd"><textarea id="comm" name="comment"
										style="width: 480px; height: 60px; resize: none; outline: none;"></textarea></td>
							</tr>

							<tr>
								<td colspan="2" style="float: right; margin-right: 20px"><input
									id="submitComment" type="submit" value="提交" />
							</tr>
						</table>
						<!-- </form> -->
					</div>
				</c:if>
			</c:if>



		</div>
	</article>
	<footer>
	<p>
		Design by <a href="" target="_blank">个人博客</a> <a href="/">ICP备号</a>
	</p>
	</footer>

	<script type="text/javascript" src="js/jquery.comment.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document)
				.on(
						"click",
						".applyComment",
						function() {
							var commentUser = $(this).parent().parent()
									.parent().parent().parent().find(
											'.commentUser').val();
							var articleId = $("#articleId").val();
							str = "<input class='commentUser' name='commentUser' type='text' value='${sessionScope.username }' style='display: none'>"
									+ "<input name='articleId' type='text' value='"+articleId+"' style='display: none'>"
									+ "<img id='commentimg' name='img' src='/images/${sessionScope.userImg }' style='display: none'>"
									+ "<table>"
									+ "<tr style='height: 60px'>"
									+ "<td class='hvttd'>"
									+ "<textarea id='comm' name='content' style='width: 575px; height: 60px; resize: none; outline: none;'>"
									+ "@"
									+ commentUser
									+ ":"
									+ "</textarea>"
									+ "</td>"
									+ "</tr>"
									+ "<tr>"
									+ "<td colspan='2' style='float: right; margin-right: 20px'>"
									+ "<input id='submitComment' type='submit' value='提交' />"
									+ "</tr>" + "</table>"

							$("#commentBox").append(str)
						})
	</script>

	<script type="text/javascript">
		$(function() {
			//var commentUserId = $(".commentUserId").val();
			var articleId = $("#articleId").val();
			$
					.ajax({
						type : "post",
						url : "CommentServlet",
						data : {
							"articleId" : articleId,
							"task" : "querycommentList"
						},
						success : function(message) {
							var list = eval(message);
							var str = "";
							var count;
							if (list.length > 2) {
								count = 2;
								$("#loadmore").show();
							} else {
								count = list.length;
							}
							for (var i = 0; i < count; i++) {
								str += "<div><input class='commentUser' name='commentUser' style='display: none' type='text' value='"+list[i].commentUser+"'>"
										+ "<input class='commentId' name='id' style='display: none' type='text' value='"+list[i].id+"'>"
										+ "<table>"
										+ "<tr>"
										+ "<td rowspan='2' class='klytd'>"
										+ "<img name='img' style='width: 65px; height: 60px; border-radius: 50%; margin-bottom: 10px' src='"
										+ list[i].img
										+ "'>"
										+ "</td>"
										+ "<td class='hvttd'>"
										+ list[i].comment
										+ "<c:if test='${sessionScope.username==blog.author }'>"
										+ "<span class='applyComment' style='padding-left:5px'>回复</span>"
										+ "<span class='delComment' style='padding-left:5px'>删除"
										+ "</span></c:if>"
										+ "</td>"
										+ "</tr>"
										+ "<tr>"
										+ "<td class='hvttd' style='font-size: 10px; font-weight: normal;'>"
										+ list[i].time
										+ "</td>"
										+ "</tr>"
										+ "</table></div>"
							}
							$("#commentBox").append(str)
						},
						error : function(error) {
							alert(error)
						}
					})
		})

		$("#loadmore")
				.click(
						function() {
							//var commentUserId = $(".commentUserId").val();
							var articleId = $("#articleId").val();
							$
									.ajax({
										type : "post",
										url : "CommentServlet",
										data : {
											"articleId" : articleId,
											"task" : "querycommentList"
										},
										success : function(message) {
											var list = eval(message);
											var str = "";
											for (var i = 0; i < list.length; i++) {
												str += "<div><input name='commentUser' class='commentUser' style='display: none' type='text' value='"+list[i].commentUser+"'>"
														+ "<table>"
														+ "<tr>"
														+ "<td rowspan='2' class='klytd'>"
														+ "<img name='img' style='width: 65px; height: 60px; border-radius: 50%; margin-bottom: 10px' src='"
														+ list[i].img
														+ "'>"
														+ "</td>"
														+ "<td class='hvttd'>"
														+ list[i].comment
														+ "<c:if test='${sessionScope.username==blog.author }'>"
														+ "<span class='applyComment' style='padding-left:5px'>回复</span>"
														+ "<span class='delComment' style='padding-left:5px'>删除"
														+ "</span></c:if>"
														+ "</td>"
														+ "</tr>"
														+ "<tr>"
														+ "<td class='hvttd' style='font-size: 10px; font-weight: normal;'>"
														+ list[i].time
														+ "</td>"
														+ "</tr>"
														+ "</table></div>"
											}
											$("#loadmore").hide();
											$("#commentBox").html("");
											$("#commentBox2").append(str)

										},
										error : function(error) {
											alert(error)
										}
									})
						})
	</script>
	<script type="text/javascript">
		$(document)
				.on(
						"click",
						"#submitComment",
						function() {
							var articleId = $("#articleId").val();
							var commentUser = $(".commentUser").val();
							var comment = $('textarea').val();
							var img = $("#commentimg").attr("src");
							$
									.ajax({
										type : "post",
										url : "CommentServlet",
										data : {
											"articleId" : articleId,
											"commentUser" : commentUser,
											"comment" : comment,
											"img" : img,
											"task" : "addcomment",
										},
										success : function(message) {
											if (message == "true") {
												window.location.href = "BlogServlet?task=queryBlogById&id="
														+ articleId;
											}
										}
									})
						})
	</script>
	<script type="text/javascript">
		$(document)
				.on(
						"click",
						".delComment",
						function() {
							if (confirm("确定删除吗?")) {
								var articleId = $("#articleId").val();
								var id = $(".commentId").val();
								$
										.ajax({
											type : "post",
											url : "CommentServlet",
											data : {
												"id" : id,
												"task" : "delete",
											},
											success : function(message) {
												if (message == "true") {
													window.location.href = "BlogServlet?task=queryBlogById&id="
															+ articleId;
												}
											}
										});
							}
						})
	</script>
	<script type="text/javascript">
		$(function() {
			$
					.ajax({
						type : "post",
						url : "TypeServlet",
						data : {
							"task" : "queryTypeList",
						},
						success : function(msg) {
							var list = eval(msg);
							var str = "<h2>文章分类</h2><ul>";
							for (var i = 0; i < list.length; i++) {
								
								str += "<li><a href='BlogServlet?task=queryBlogByType&type="+list[i].type+"'>" + list[i].type
								+ "</a></li>"
							}
							str += "</ul>";
							$(".fenlei").append(str)
						},

					})
		})
	</script>
	<script type="text/javascript">
		$("#index").click(function() {
			window.location.href = "UserServlet?task=out"
		})
	</script>
	<script type="text/javascript">
		function logout() {
			window.location.href = "UserServlet?task=logout"
		}
	</script>
</body>
</html>